<template>
  <el-dialog
    :title="!dataForm.id ? '新增关键词' : $t('sysManagement.modify')"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-form
      @submit.native.prevent
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      size="small"
      @keyup.enter.native="dataFormSubmit()"
      :label-width="this.$i18n.t('language') === 'English' ? '155px' : '80px'"
    >
      <el-form-item label="关键词" prop="name">
        <el-input
          v-model="dataForm.name"
          maxlength="50"
          size="small"
          show-word-limit
          placeholder="请输入关键词"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item :label="$t('sys.orderNum')" prop="orderNum">
        <el-input
          v-model="dataForm.orderNum"
          @input="handleInputOrderNum"
          :placeholder="$t('sys.orderNum')"
          maxlength="5"
          size="small"
          show-word-limit
        ></el-input>
      </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <div class="default-btn" @click="close()">{{ $t("coupon.cancel") }}</div>
      <div class="default-btn primary-btn" @click="dataFormSubmit()">
        {{ $t("coupon.confirm") }}
      </div>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    var validateName = (rule, value, callback) => {
      if (!value.toString().trim()) {
        callback(new Error(this.$i18n.t("sys.menuNameNoNull")));
      } else {
        callback();
      }
    };
    return {
      visible: false,
      isRef: false,
      dataForm: {
        id: 0,
        name: "",
        orderNum: "0", //排序
      },
      dataRule: {
        name: [
          {
            required: true,
            message: this.$i18n.t("sys.menuNameNoNull"),
            trigger: "blur",
          },
          { validator: validateName, required: true, trigger: "blur" },
        ],
        orderNum: [
          {
            required: true,
            message: this.$i18n.t("sys.menuNameNoNull"),
            trigger: "blur",
          },
          { validator: validateName, required: true, trigger: "blur" },
        ],
      },
      isSubmit: false,
      menuList: [],
      selectedMenu: [],
      menuListTreeProps: {
        value: "id",
        label: "name",
      },
      disabled: [
        {
          label: this.$i18n.t("sys.no"),
          value: 0,
        },
        {
          label: this.$i18n.t("sys.yes"),
          value: 1,
        },
      ],
    };
  },
  created() {},
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.isSubmit = false;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
      });
    },
    handleSelectMenuChange(val) {
      this.dataForm.parentId = val[val.length - 1];
    },
    handleInputOrderNum() {
      this.dataForm.orderNum = this.dataForm.orderNum.replace(/\D/g, "");
    },
    clear() {
      this.dataForm = {
        id: 0,
        name: "",
      };
    },
    beforeClose(done) {
      this.clear();
      done();
    },
    close() {
      this.clear();
      this.visible = false;
    },
    // 表单提交
    dataFormSubmit() {
      console.log("this.dataForm", this.dataForm);
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if (this.isSubmit) {
            return false;
          }
          this.isSubmit = true;
          this.$http({
            url: this.$http.adornUrl(`/admin/ShieldingWord/saveShieldingWord`),
            method: this.dataForm.id ? "put" : "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              name: this.dataForm.name,
              orderNum: this.dataForm.orderNum,
            }),
          })
            .then(({ data }) => {
              this.$message({
                message: this.$i18n.t("publics.operation"),
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                  this.clear();
                },
              });
            })
            .catch((e) => {
              this.isSubmit = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss"></style>
